import React, { useState, useEffect } from 'react'
import '../../../System/Account_management/component/Css/Account_management.css'
import { Input, Button, ConfigProvider, Space, DatePicker, Modal, Cascader, Form, InputNumber, Radio, Select, Switch, TreeSelect, } from 'antd';

// 调用定义接口
import { getuserlabel,adduserlabel } from '../../../../request/api'
const { RangePicker } = DatePicker;

export default function User_title(props) {
    const { getTitle, getuserlist } = props;

    let [item, setitem] = useState('')//搜索框
    let [num, setnum] = useState(0)//当前检索到多少条数据
    const [modal2Open, setModal2Open] = useState(false); //控制模态框是否显示


    let [name, setname] = useState([])//账号
    let [description, setdescription] = useState([])//密码
    let [color, setcolor] = useState([])//手机号
    let [tagstype, settagstype] = useState([])//角色

    // 搜索
    const search = async () => {
        let res = await getuserlabel({ item: item })
        setnum(res.data.length)
        getTitle(res.data)
        setitem('')
    }

    // 添加账号
    const add = async () => {
        let from = {
            name: name,
            color: color,
            description: description,
            tagstype: tagstype,
        }
        let res = await adduserlabel({ from: from })
        if (res.code == 200) {
            getuserlist(200)
            alert('添加成功')
            setModal2Open(false)
            setname('')
            setcolor('')
            setdescription('')
            settagstype('')
        }
    }



    const [componentSize, setComponentSize] = useState<SizeType | 'default'>('default');
    const onFormLayoutChange = ({ size }: { size: SizeType }) => {
        setComponentSize(size);
    };




    return (
        <div>
            <div className='xitong_Title'>
                <div className='xitong_Title_left'>
                    <Input size="large" placeholder="请输入内容" prefix='标签：' style={{ marginBottom: '20px' }} value={item} onChange={(event) => {
                        setitem(event.target.value)
                    }} />
                    <Button size="large" style={{ marginRight: '10PX' }} onClick={() => {
                        search()
                    }}>检索</Button>
                    <Button size="large" style={{ marginRight: '10PX' }} onClick={() => {
                        search()
                    }}>重置</Button>
                    <Button size="large" style={{ display: name == '操作日志' ? 'none' : 'inline-block' }} onClick={() => {
                        setModal2Open(true)
                    }}>新建标签</Button>
                </div>
                <div className='xitong_Title_time'>
                    <RangePicker showTime style={{ height: '40px', display: name == '操作日志' ? '' : 'none' }}></RangePicker>
                </div>
                <span className='xitong_user'>当前共检索到{num}条内容</span>
                <Modal
                    title='新建标签'
                    centered
                    open={modal2Open}
                    onOk={() => add()}
                    onCancel={() => setModal2Open(false)}
                >
                    <Form
                        labelCol={{ span: 6 }}
                        wrapperCol={{ span: 14 }}
                        layout="horizontal"
                        initialValues={{ size: componentSize }}
                        onValuesChange={onFormLayoutChange}
                        size={componentSize as SizeType}
                        style={{ maxWidth: 600 }}
                    >
                        <Form.Item label="标签名称">
                            <Input value={name} onChange={(e) => {
                                setname(e.target.value)
                            }} />
                        </Form.Item>
                        <Form.Item label="标签颜色" >
                            <Select value={color} onChange={(e) => {
                                setcolor(e)
                            }}>
                                <Select.Option value='red'>红色</Select.Option>
                                <Select.Option value='geekblue'>黄色</Select.Option>
                                <Select.Option value='green'>蓝色</Select.Option>

                            </Select>
                        </Form.Item>
                        <Form.Item label="角色描述">
                            <Input value={description} onChange={(e) => {
                                setdescription(e.target.value)
                            }} />
                        </Form.Item>
                        <Form.Item label="标签颜色" >
                            <Select value={tagstype} onChange={(e) => {
                                settagstype(e)
                            }}>
                                <Select.Option value='true'>启用</Select.Option>
                                <Select.Option value='false'>禁用</Select.Option>
                            </Select>
                        </Form.Item>
                    </Form>

                </Modal>
            </div>
        </div>
    )
}

